<!-- subpkg_consult/room/components/patient-info.vue -->
<script lang="ts" setup>
	// 导入类型
	import { ConsultRecord, PictureElement } from '@/types/room.d.ts'

	// 定义 props
	const props = defineProps<{ info: ConsultRecord }>()

	// 定义 映射关系
	// 患病时长
	const illnessTimes = [
		{
			type: 1,
			value: '一周内',
		},
		{
			type: 2,
			value: '一个月内',
		},
		{
			type: 3,
			value: '半年内',
		},
		{
			type: 4,
			value: '半年以上',
		},
	]
	// 是否就诊过
	const consultFlags = [
		{
			type: 1,
			value: '就诊过',
		},
		{
			type: 0,
			value: '没有就诊过',
		},
	]

	// 患病时长
	const renderTime = (type: number) => {
		return illnessTimes.find((v) => v.type === type)?.value
	}
	// 是否就诊
	const renderConsult = (type: number) => {
		return consultFlags.find((v) => v.type === type)?.value
	}

	// 渲染页面
	//显示图片
	const showImgs = (pictures: PictureElement) => {
		uni.previewImage({
			urls: pictures.map((v: PictureElement) => v.url),
		})
	}
</script>
<template>
	<!-- 患者信息（21） -->
	<view class="patient-info">
		<view class="header">
			<view class="title"
				>{{ info.patientInfo.name }} {{ info.patientInfo.genderValue }}
				{{ info.patientInfo.age }}岁</view
			>
			<view class="note"
				>{{ renderTime(info.illnessTime) }} | {{ renderConsult(info.consultFlag) }}</view
			>
		</view>
		<view class="content">
			<view class="list-item">
				<text class="label">病情描述</text>
				<text class="note">{{ info.illnessDesc }}</text>
			</view>
			<view class="list-item">
				<template v-if="info.pictures.length > 0">
					<text class="label">图片</text>
					<text @tap="showImgs(info.pictures)" class="note">点击查看</text>
				</template>

				<!-- <text class="note"> 暂无图片</text> -->
			</view>
		</view>
	</view>
</template>

<style lang="scss">
	.patient-info {
		padding: 30rpx;
		margin-top: 60rpx;
		border-radius: 20rpx;
		box-sizing: border-box;
		background-color: #fff;

		.header {
			padding-bottom: 20rpx;
			border-bottom: 1rpx solid #ededed;

			.title {
				font-size: 32rpx;
				color: #121826;
				margin-bottom: 10rpx;
			}

			.note {
				font-size: 26rpx;
				color: #848484;
			}
		}

		.content {
			margin-top: 20rpx;
			font-size: 26rpx;

			.list-item {
				display: flex;
				margin-top: 10rpx;
			}

			.label {
				width: 130rpx;
				color: #3c3e42;
			}

			.note {
				flex: 1;
				line-height: 1.4;
				color: #848484;
			}
		}
	}
</style>
